<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>FrozenUI Demo</title>
        <script type="text/javascript" src="http://tajs.qq.com/stats?sId=37342703" charset="UTF-8"></script>
        <link rel="stylesheet" href="../css/frozen.css">
        <link rel="stylesheet" href="demo.css">
        <script src="../lib/zepto.min.js"></script>
        <script src="../js/frozen.js"></script>
    </head>
    
    <body ontouchstart>
        <header class="ui-header ui-header-positive ui-border-b">
            <i class="ui-icon-return" onclick="history.back()"></i><h1>对话框 dialog</h1><button class="ui-btn">回首页</button>
        </header>
        <footer class="ui-footer ui-footer-btn">
            <ul class="ui-tiled ui-border-t">
                <li data-href="index.html" class="ui-border-r"><div>基础样式</div></li>
                <li data-href="ui.html" class="ui-border-r"><div>UI组件</div></li>
                <li data-href="js.html"><div>JS插件</div></li>
            </ul>
        </footer>
        <section class="ui-container">




<section id="dialog">
	<div class="demo-item">
		<p class="demo-desc">对话框</p>
		<div class="demo-block">
			<div class="ui-dialog">
			    <div class="ui-dialog-cnt">
				    <header class="ui-dialog-hd ui-border-b">
	                    <h3>新手任务</h3>
	                    <i class="ui-dialog-close" data-role="button"></i>
	                </header>
			        <div class="ui-dialog-bd">
			            <h4>标题标题</h4>
			            <div>开通年费QQ会员即可领取欢乐斗地主感恩节回馈礼包！</div>
			        </div>
			        <div class="ui-dialog-ft">
			            <button type="button" data-role="button">取消</button>
			            <button type="button" data-role="button">开通</button>
			        </div>
			    </div>        
			</div>
			<script class="demo-script">
			$(".ui-dialog").dialog("show");
			</script>
			
		</div>
		<div class="ui-btn" id="btn1">模板创建弹窗</div>
    	<div class="ui-btn" id="btn2">DOM创建弹窗</div>
    	<script class="demo-script">
		(function (){
            $("#btn1").click(function(){
			    var dia=$.dialog({
			        title:'温馨提示',
			        content:'温馨提示内容',
			        button:["确认","取消"]
			    });

			    dia.on("dialog:action",function(e){
			        console.log(e.index)
			    });
			    dia.on("dialog:hide",function(e){
			        console.log("dialog hide")
			    });
			})
			$("#btn2").click(function(){
			    $(".ui-dialog").dialog("show");
			})
		})();
        </script>
	</div>
</section>


        </section><!-- /.ui-container-->
        <script>
        $('.ui-list li,.ui-tiled li').click(function(){
            if($(this).data('href')){
                location.href= $(this).data('href');
            }
        });
        $('.ui-header .ui-btn').click(function(){
            location.href= 'index.html';
        });
        </script>
    </body>
</html>